<template>
  <div class="layout-col bs flex1">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h28"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">实时告警</span>
      </div>
    </div>
    <div class="flex1 flex-col-cb ww100 pplr5">
      <div class="flex-sc flex1 ww100">
        <img class="w40" src="@/assets/images/a1.png" />
        <div class="flex-cc flex1 ppl5 f12">
          <div class="flex5 cursor i21 flex-col-cc">
            <span class="f16">0</span>
            <span class="mt5"><span class="mr5 f12 fw">·</span>正常</span>
          </div>
          <div class="flex5 cursor i6 flex-col-cc">
            <span class="f16">0</span>
            <span class="mt5"><span class="mr5 f12 fw">·</span>告警</span>
          </div>
          <div class="flex6 i6 flex-col-cc">
            <span class="f16">0%</span>
            <span class="mt5"><span class="mr5 f12 fw">·</span>告警率</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const configStore = proxy.configStore();
const state = reactive({
  ...publicStore.$state,
});

</script>

<style scoped lang="scss">

</style>
